<template>
  <div>
    <a-card>
      <div id="lineChart_example"></div>
    </a-card>
  </div>
</template>

<script>
export default {
  name: "LineChart",
  data(){
    return{

      //定义1个undefined对象，用来mounted初始化echarts
      myChart: undefined,


      cfg2:{
        title: {
          text: 'ECharts 折线图示例'
        },
        // color: ['#f44'],  配色
        //hover悬浮提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },



        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name:'收益',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }

    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('lineChart_example'));
    this.myChart.setOption(this.cfg2);
    // this.myChart.resize();



  },
  methods:{
    reSizeLineChart(){
      this.myChart.resize();
      // this.myChart.refresh();
      // this.$forceUpdate();

    }
  }
}
</script>

<style scoped>
#lineChart_example {
  margin: 0 auto;
  width: 100%;
  height: 500px;
  padding: 0;
}
</style>